<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:fragment="comments"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<body>
<div th:if="${session.article}!=null">
    <div th:id="${session.article.getId()!=0?: 0}" class="comment-container">
        <div id="comments" class="clearfix">
            <div>
                <span class="response" th:if="${session.user==null}">
                    <form name="logoutform" th:action="@{/logout}" method="post"></form>
                    <th:block sec:authorize="isAuthenticated()">
                        Hello，<a data-no-instant="" sec:authentication="name"></a>
                        如果你想 <a href="javascript:document.logoutform.submit();">注销</a> ?
                    </th:block>
                    <th:block sec:authorize="isAuthenticated()">
                        用户想要评论，请先<a th:href="@{/login}" title="登录" data-no-instant="">登录</a>!
                    </th:block>
                </span>
                <th:block th:if="${comments.pages}<=0">
                    <strong>还没有评论哦！快来抢沙发吧！！O(∩_∩)O</strong>
                </th:block>
                <div sec:authorize="isAuthenticated()" style="margin-top: 10px">
                    <form id="comment-form" class="comment-form" role="form"
                          onsubmit="return TaleComment.subComment();">
                        <input type="hidden" name="article_id" id="article_id" th:value="${session.article.getId()}"/>
                        <input type="hidden" name="user_id" id="user_id" th:value="${session.user.getId()}"/>
                        <input type="hidden" name="reviewer" id="reviewer" th:value="${session.user.getUsername()}"/>
                        <textarea name="content" id="content" class="form-control" placeholder="评论不能为空哦!"
                                  required="required" minlength="5" maxlength="2000"></textarea>
                        <button type="submit" class="submit" id="misubmit">提交</button>
                    </form>
                </div>
            </div>
            <!-- 分页显示其他评论内容 -->
            <div th:if="${comments}">
                <ol class="comment-list">
                    <th:block th:each="comment :${comments.list}">

                        <li th:id="'li-comment-'+${comment.id}" class="comment-body comment-parent comment-odd">
                            <div th:id="'comment-'+${comment.id}">
                                <div class="comment-view" onclick="">
                                    <div class="comment-header">
                                        <!--设置人物头像和名称-->
                                        <img class="avatar" th:src="@{/assets/img/avatars.jpg}" height="50"/>
                                        <a class="comment-author" rel="external nofollow"
                                           th:text="${comment.reviewer}"/>
                                        <input type="hidden" name="comment_id" id="comment_id" th:value="${comment.id}">
                                        <input type="hidden" name="comment_name" id="comment_name"
                                               th:value="${comment.reviewer}">
                                    </div>
                                    <!-- 评论内容 -->
                                    <div class="comment-content">
                                        <span class="comment-author-at"></span>
                                        <p th:utext="${comment.content}"></p>
                                    </div>
                                    <!-- 评论日期 -->
                                    <div class="comment-meta">
                                        <time class="comment-time" th:text="${commons.dateFormat(comment.created)}"></time>
                                        <button sec:authorize="isAuthenticated()"
                                                th:if="${comment.user_id}!= ${session.user.getId()}"
                                                th:onclick="reply([[${comment.id}]])" class="reply_btn"
                                                style="color: #1b961b">
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;回复
                                        </button>
                                    </div>
                                    <div th:each="reply: ${session.replyList}">
                                        <div th:if="${reply.getComment_id()==comment.id}">
                                            <a th:text="${reply.getReply_name()}" style="color: #0d86c4"></a>
                                            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;回复了&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                            <a th:text="${reply.getReview_name()}" style="color: #52c444"></a>
                                                <!--<div th:if="${reply.getReply_name()!=session.user.getUsername()}">-->
                                                <button
                                                        th:if="${reply.getReply_name()!=session.user.getUsername()}"
                                                        th:onclick="reply2([[${comment.id}]],[[${reply.getReply_name()}]])" class="reply_btn"
                                                        style="color: #1b961b">
                                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;回复
                                                </button>
                                            <!--</div>-->
                                            <br>
                                            <span th:text="${reply.getContent()}" style="color: #83c49b"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </th:block>
                </ol>
                <!-- 进行评论分页 -->
                <div class="lists-navigator clearfix">
                    <ol class="page-navigator">
                        <!-- 判断并展示上一页 -->
                        <th:block th:if="${comments.hasPreviousPage}">
                            <li class="prev"><a th:href="'?cp='+${comments.prePage}+'#comments'">上一页</a></li>
                        </th:block>
                        <!-- 判断并展示中间页 -->
                        <th:block th:each="navIndex : ${comments.navigatepageNums}">
                            <th:block th:if="${comments.pages} <= 5">
                                <li th:class="${comments.pageNum}==${navIndex}?'current':''">
                                    <a th:href="'?cp='+${navIndex}+'#comments'" th:text="${navIndex}"></a>
                                </li>
                            </th:block>
                            <th:block th:if="${comments.pages} > 5">
                                <li th:if="${comments.pageNum <=3 &&  navIndex <= 5}"
                                    th:class="${comments.pageNum}==${navIndex}?'current':''">
                                    <a th:href="'?cp='+${navIndex}+'#comments'" th:text="${navIndex}"></a>
                                </li>
                                <li th:if="${comments.pageNum >= comments.pages-2 &&  navIndex > comments.pages-5}"
                                    th:class="${comments.pageNum}==${navIndex}?'current':''">
                                    <a th:href="'?cp='+${navIndex}+'#comments'" th:text="${navIndex}"></a>
                                </li>
                                <li th:if="${comments.pageNum >=4 && comments.pageNum <= comments.pages-3 &&  navIndex >= comments.pageNum-2 && navIndex <= comments.pageNum+2}"
                                    th:class="${comments.pageNum}==${navIndex}?'current':''">
                                    <a th:href="'?cp='+${navIndex}+'#comments'" th:text="${navIndex}"></a>
                                </li>
                            </th:block>
                        </th:block>
                        <!-- 判断并展示下一页 -->
                        <th:block th:if="${comments.hasNextPage}">
                            <li class="next"><a th:href="'?cp='+${comments.nextPage}+'#comments'">下一页</a></li>
                        </th:block>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<div th:replace="comm/tale_comment::tale_comment"></div>
<script type="text/javascript">
    function reply(id) {
        //alert(id)
        $(".reply_btn").click(function () {
            $(".reply_textarea").remove();
            $(this).parent().append("" + "<form id='reply-form' class='reply-form'>" +
                "<a class='reply_textarea'>" +
                "<input type='hidden' name='review_name' id='review_name' >" +
                "<input type='hidden' name='reply_name' id='reply_name' >" +
                "<input type='hidden' name='article_id' id='reply_article_id' >" +
                "<input type='hidden' name='comment_id' id='reply_comment_id' >" +
                "<textarea name='content'id='reply_content' style='border:#0d86c4 solid 1px' cols='40' rows='5'></textarea><br/>" +
                "<button onclick=\"load('" + id + "')\">回复</button>" +
                "</div></form>");
        })
    }

        function reply2(id,name) {
            $(".reply_btn").click(function () {
                $(".reply_textarea").remove();
                $(this).parent().append("" + "<form id='reply-form' class='reply-form'>" +
                    "<a class='reply_textarea'>" +
                    "<input type='hidden' name='review_name' id='review_name' >" +
                    "<input type='hidden' name='reply_name' id='reply_name' >" +
                    "<input type='hidden' name='article_id' id='reply_article_id' >" +
                    "<input type='hidden' name='comment_id' id='reply_comment_id' >" +
                    "<textarea name='content'id='reply_content' style='border:#0d86c4 solid 1px' cols='40' rows='5'></textarea><br/>" +
                    "<button onclick=\"load2('" + id + "','" + name + "')\">回复</button>" +
                    "</div></form>");
            })
    }

    /*//页面加载完毕后开始执行的事件
    $(".reply_btn").click(function(){
        $(".reply_textarea").remove();
        $(this).parent().append("" +"<form action='/user/publishReply'>"+
            "<div class='reply_textarea'>" +"<input type='hidden' name='review_name' id='review_name'>"+
            "<textarea name='content'id='content' style='border:#0d86c4 solid 1px' cols='40' rows='5'></textarea><br/>" +
            "<input type='submit' value='发表' />" +
            "</div></form>");
    });
});*/
</script>
<script>
    function load(id) {
        var content = $("#reply_content").val();
        var reviewer = $("#comment_name").val();
        var reply = $("#reviewer").val();
        var article_id = $("#article_id").val();
        var comment_id = id;
        var user_id=$("#user_id").val();
        publishReply(content, reviewer, reply, article_id, comment_id,user_id);
    }
    function load2(id,name) {
        var content = $("#reply_content").val();
        var reviewer = name;
        var reply = $("#reviewer").val();
        var article_id = $("#article_id").val();
        var comment_id = id;
        var user_id=$("#user_id").val();
        publishReply(content, reviewer, reply, article_id, comment_id,user_id);
    }

    function publishReply(content, reviewer, reply, article_id, comment_id,user_id) {

        $.post(
            '/user/publishReply',
            {
                content: content,
                review_name: reviewer,
                reply_name: reply,
                article_id: article_id,
                comment_id: comment_id,
                user_id:user_id
            },
            function (data) {
                if (data == "OK") {
                    alert("回复成功！");
                }
                else {
                    alert("回复失败！");
                }
                window.location.reload();
            }
        );
    }


</script>
</html>